<template>
  <div/>
</template>

<script setup lang="ts">
import { useRouter, RouterView, RouterLink } from 'vue-router'
import { getMenuData, clearMenuItem, type RouteContextProps } from '@ant-design-vue/pro-layout'
import { SmileOutlined, HeartOutlined, MailOutlined } from '@ant-design/icons-vue'
import { ref, reactive, onMounted } from 'vue'
// import IconFont from '@/components/IconFont/index.vue'
import store from '@/store'
const state = reactive({
  menuList: []
})
const router = useRouter()
const SubMenu = {
  name: 'SubMenu',
  props: {
    menuInfo: {
      type: Object,
      default: () => ({})
    }
  },
  template: `
    <a-sub-menu :key="menuInfo.key">
      <template #icon><MailOutlined /></template>
      <template #title>{{ menuInfo.name }}</template>
      <template v-for="item in menuInfo.children" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
                <icon-font v-if="item.meta.icon" :type="item.meta.icon" />
            </template>
            {{ item.name }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
        </template>
      </template>
    </a-sub-menu>
  `,
  components: {
    MailOutlined
  }
}
const menuDatas = computed(() => {
  console.log(11100)
  console.log(store.userApp.menuList)
  state.menuList = store.userApp.menuList
  store.userApp.menuList = [
    {
      name: '用户中心',
      path: '/',
      key: 386,
      meta: {
        title: '用户中心',
        icon: 'icon-deleteteam'
      },
      children: [
        {
          name: '用户管理',
          path: '/sys/user/index',
          key: 28,
          meta: {
            title: '用户管理',
            icon: 'icon-user'
          }
        }
      ]
    },
    {
      name: '数据统计',
      path: '/data-statistics/index',
      key: 454,
      meta: {
        title: '数据统计',
        icon: 'icon-areachart'
      }
    },
    {
      name: '工作台',
      path: '/work/index',
      key: 422,
      meta: {
        title: '工作台',
        icon: 'icon-gongzuotai'
      }
    },
    {
      name: '患者管理',
      path: '/patientManagement/index',
      key: 424,
      meta: {
        title: '患者管理',
        icon: 'icon-huanzheguanli'
      }
    },
    {
      name: '模板管理',
      path: '/templateManage/index',
      key: 426,
      meta: {
        title: '模板管理',
        icon: 'icon-mobanguanli'
      }
    }
  ]
  return store.userApp.menuList
})
//
//
const collapsed = ref<boolean>(false)
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value
}
//
//
console.log('menuDatas', menuDatas)

// const pushOpenKey = (path: string) => {
//   console.log(path);
//   const i = state.openKeys.findIndex(v => {
//     return v === path;
//   });
//   if (i !== -1) {
//     state.openKeys.splice(i, 1);
//   } else {
//     state.openKeys.push(path);
//   }
//   console.log(state);
// };

const currentUser = reactive({
  nickname: 'Admin',
  avatar: 'A'
})

const layoutContentStyle = computed(() => {
  if (router.currentRoute.value.name === 'home') {
    return {
      height: 'calc(100vh - 48px)'
    }
  } else {
    return {
      height: 'calc(100vh - 88px)'
    }
  }
})
</script>

<style lang="less" scoped></style>
